<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="__ROOT__/Index/Common/css/admin.css"/>
    <script src="__ROOT__/Index/Common/js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <header>
        <h1>后台管理</h1>
    </header>
    <aside>
        <div class="container" id="container">
            <p class="title" onclick="switch1(0)">商品管理</p>
            <ul class="content" id="content1">
                <a href="__URL__/admin" onclick="switch2(0)"><li>添加商品</li></a>
                <a href="__URL__/showGoods/p/1.html" onclick="switch2(1)"><li>商品列表</li></a>
                <li>用户评论</li>
            </ul>
            <p class="title" onclick="switch1(1)">订单管理</p>
            <ul class="content" id="content2">
                <a href="__URL__/orders" onclick="switch2(2)"><li>订单列表</li></a>
                <a href="" onclick="switch2(3)"><li>添加订单</li></a>
            </ul>
        </div>
    </aside>
    <article>
    		<!-- 添加货物一 -->
    		<div class="addGoods" style="display: none;">
    			<form>
	        		商品种类<select id="clothesStyle">
	        			<option value="">请选择商品种类</option>
	        			<option value="新品">新品</option>
	        			<option value="T恤">T恤</option>
	        			<option value="卫衣">卫衣</option>
	        			<option value="衬衫">衬衫</option>
	        			<option value="外套">外套</option>
	        			<option value="毛衣">毛衣</option>
	        			<option value="裙子">裙子</option>
	        			<option value="裤子">裤子</option>
	        			<option value="折扣">折扣</option>
	        			<option value="男装">男装</option>
	        			<option value="女装">女装</option>
	        		</select><br />
	        		商品名称<input type="text" name="name" id="name"/><br />
	        		商品颜色<input type="text" id="color" placeholder='多种颜色","隔开'/><br />
	        		颜色图片<textarea id="colorImg" placeholder='图片之间用“,”隔开，不同颜色图片用“;”隔开'></textarea><br />
	        		商品尺码<input type="text" name="size" id="size"/><br />
	        		商品库存<input type="text" name="repertory" id="repertory"/><br />
	        		商品原价<input type="text" name="nowPrice" id="beforePrice"/><br />
	        		折扣价格<input type="text" name="beforePrice" id="nowPrice"/><br />
	        		商品属性<textarea name="attribute" id="attribute" placeholder='属性之间用","隔开'></textarea><br />
	        		<div class="bigText">
	        			缩略图片<textarea name="thumbnail" id="smallImg" placeholder='图片地址之间用","隔开'></textarea>
	        		</div>
	        		<div class="bigText">
	        			展示图片<textarea name="showImg" id="showImg" placeholder='图片地址之间用“,”隔开'></textarea><br />
	        		</div>
	        		<input type="button" value="完成" class="next" onclick="sub()"/>
	        </form>
	        </div>
    	
        <!--显示添加成功-->
        <p class="success">添加成功 ！</p>
        <!--商品列表-->
        <div class="goodsList" style="display: none;">
        		<table>
	        		<tr>
	        			<th>商品id</th>
	        			<th>商品名称</th>
	        			<th>商品类型</th>
	        			<th>商品图片</th>
	        			<th>商品价格</th>
	        			<th>颜色</th>
	        			<th>商品尺寸</th>
	        			<th>操作</th>
	        		</tr>
	        		<foreach name='goodslist' item='vo'>
	        			<tr id='{$vo.id}'>
		        			<td>{$vo.id}</td>
		        			<td><input class="change" id="changeName{$vo.id}" type="text" value="{$vo.name}"/></td>
		        			<td>
		        				<select name="" id="changeStyle{$vo.id}">
		        					<option value="{$vo.style}">{$vo.style}</option>
				        			<option value="新品">新品</option>
				        			<option value="T恤">T恤</option>
				        			<option value="卫衣">卫衣</option>
				        			<option value="衬衫">衬衫</option>
				        			<option value="外套">外套</option>
				        			<option value="毛衣">毛衣</option>
				        			<option value="裙子">裙子</option>
				        			<option value="裤子">裤子</option>
				        			<option value="折扣">折扣</option>
				        			<option value="男装">男装</option>
				        			<option value="女装">女装</option>
		        				</select>
		        			</td>
		        			<td><img class="showImg" src="{$vo.color_img}"/></td>
		        			<td><input class="change" id="changePrice{$vo.id}" type="text" value="{$vo.n_price}"/></td>
		        			<td><input class="change" id="changeColor{$vo.id}" type="text" value="{$vo.color}"/></td>
		        			<td><input class="change" id="changeSize{$vo.id}" type="text" value="{$vo.size}"/></td>
		        			<td>
		        				<button class="changeList" onclick="goodsChange({$vo.id})">修改</button>
		        				<button class="delete" onclick="goodsDelete({$vo.id})">删除</button>
		        			</td>
		        		</tr>
	        		</foreach>
	        </table>
	        <div class="page_list">{$page}</div>
        </div>
        <!--用户评论-->
        <div class="userReview" style="display: none;">
      			
        </div>
        <!--订单列表-->
        <div class="order" style="display:block;">
        	<div class="orderSearch">
        		<input type="text" placeholder="搜索" id="orderInput"/>
        		<button id="orderButton" onclick="orderSearch()">搜索</button>
        	</div>
        		<table>
        			<tr class="orderHead">
        				<th>订单编号</th>
        				<th>订单信息</th>
        				<th>收件人</th>
        				<th>买家ID</th>
        				<th>地址</th>
        				<th>联系电话</th>
        				<th>订单状态</th>
        				<th>操作</th>
        			</tr>
                    <volist name="orders" id="orders">
                        <tr>
                            <td>{$orders.orderNumber}</td>
                            <td>
                                商品ID:{$orders.goodsId}<br>
                                商品属性：{$orders.color},{$orders.size}
                            </td>
                            <td >{$orders.goodsMaster}</td>
                            <td>{$orders.userId}</td>
                            <td>{$orders.address}</td>
                            <td>{$orders.tel}</td>
                            <td>
                                <select id="orders{$orders.id}" class="ordersStutas">
                                    <option value="{$orders.status}">{$orders.status}</option>
                                    <option value="订单未处理">订单未处理</option>
                                    <option value="订单已作废">订单已作废</option>
                                    <option value="已发货">已发货</option>
                                    <option value="派件中">派件中</option>
                                    <option value="订单已完成">订单已完成</option>
                                </select>
                            </td>
                            <td>
                                <button class="delete" onclick="changeOrder({$orders.id})">修改</button>
                            </td>
                        </tr>
                    </volist>
        		</table>
        </div>
    </article>
</body>
<script>
	var address = window.location.href;
	if(address.match("admin")=='admin'){
		$('article>div').css('display','none');
		$('article>div').eq(0).css('display','block');
	}else if(address.match('showGoods')=="showGoods"){
		$('article>div').css('display','none');
		$('article>div').eq(1).css('display','block');
	}else if(address.match('orders')=="orders"){
        $('article>div').css('display','none');
        $('article>div').eq(3).css('display','block');
    }
		
	autodivheight();

	function autodivheight() { //函数：获取尺寸
		//获取浏览器窗口高度
		var winHeight = 0;
		if(window.innerHeight)
			winHeight = window.innerHeight;
		else if((document.body) && (document.body.clientHeight))
			winHeight = document.body.clientHeight;
		//通过深入Document内部对body进行检测，获取浏览器窗口高度
		if(document.documentElement && document.documentElement.clientHeight)
			winHeight = document.documentElement.clientHeight;
		//DIV高度为浏览器窗口的高度
		$("aside").css("height", winHeight - 70 + "px");
	}
	window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度
	
	//上传商品数据
	function sub() {
		var name = $("#name").val();
		var clothesStyle = $("#clothesStyle").val();
		var color = $("#color").val();
		var colorImg = $("#colorImg").val();
		var size = $("#size").val();
		var repertory = $("#repertory").val();
		var nowPrice = $("#nowPrice").val();
		var beforePrice = $("#beforePrice").val();
		var attribute = $("#attribute").val();
		var smallImg = $("#smallImg").val();
		var showImg = $("#showImg").val();
		$.ajax({
			type: "POST",
			url: "__URL__/addGoods",
			async: true,
			data: {
				name,
				clothesStyle,
				color,
				colorImg,
				size,
				repertory,
				nowPrice,
				beforePrice,
				attribute,
				smallImg,
				showImg
			},
			dataType: "json",
			success: function(data) {
				console.log(data.status);
				if(data.status == 1) {
					$("#name").val('');
					$("#clothesStyle").val('');
					$("#color").val('');
					$("#colorImg").val('');
					$("#size").val('');
					$("#repertory").val('');
					$("#nowPrice").val('');
					$("#beforePrice").val('');
					$("#attribute").val('');
					$("#smallImg").val('');
					$("#showImg").val('');
					$('.addGoods').css('display','none');
					$(".success").css('display','block');
				}
			}
		});
	}
	
	//开关1
	function switch1(num) {
		var display = $('.container .content').eq(num).css('display')
		$('.container .content').eq(num).css('display', display == 'none' ? 'block' : 'none');
	}
	
//	开关2
	function switch2(num){
		
	}
	
	//修改数据
	function goodsChange(num){
		var id = num;
		var name = $('#changeName'+num).val();
		var n_price = $('#changePrice'+num).val();
		var color = $('#changeColor'+num).val();
		var size = $('#changeSize'+num).val();
		var clothesStyle = $('#changeStyle'+num).val();
		$.ajax({
			type:'POST',
			url:'__URL__/changeGoods',
			async:true,
			data:{
				id,
				name,
				n_price,
				color,
				size,
				clothesStyle
			},
			dataType:"json",
			success:function(data){
				console.log(data.status);
			},
			error:function(err){
				console.log(err)
			}
		})
	}
	
	//删除数据
	function goodsDelete(num){
		var id = num;
		$.ajax({
			type:"POST",
			url:"__URL__/deleteGoods",
			async:true,
			data:{
				id
			},
			dataType:"json",
			success:function(data){
				if(data.status==1){
					$('#'+num).css('display','none');
				}
			}
		})
	}
	
	//修改订单
    function changeOrder(num){
	    var id = num;
        var orderStatus = $('#orders'+num).val();
        console.log(orderStatus);
        $.ajax({
            type:'post',
            url:'__URL__/ordersDeal',
            data:{
                id,
                orderStatus
            },
            success:function (data) {
                console.log(data);
            },
            error:function(err){
                console.log(err);
            }
        })
    }
    function orderSearch() {
        var search = $('#orderInput').val();
        location.href='__URL__/orders?search='+search;
    }
	
</script>
</html>
